<template>
  <div class="param-table">
    <ul class="table-body">
      <li v-for="(d,i) in data" :key="i" class="table-row">
        <span class="table-label table-cell" :style="styleLabel">{{ d[struct.label] }}</span>
        <span class="table-value table-cell">{{ d[struct.value] }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'ParamTabale',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    struct: {
      type: Object,
      default: () => ({
        label: 'label',
        value: 'value'
      })
    },
    width: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
    }
  },
  computed: {
    styleLabel() {
      return this.width !== undefined ? { width: this.width } : ''
    }
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.param-table{
  border: 1px solid rgba(245, 246, 247, 1);
  box-sizing: border-box;
  .table-body{
    list-style: none;
    padding: 0;
    .table-row{
      line-height: 16px;
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      box-sizing: border-box;
      .table-cell{
        display: flex;
        align-items: center;
        box-sizing: border-box;
        flex-wrap: wrap;
        word-break: break-all;
        padding: 10px 0;
      }
      .table-cell + .table-cell{
        border-left: 1px solid rgba(245, 246, 247, 1);
      }
      .table-label {
        width: 92px;
        flex: 0 0 auto;
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        justify-content: center;
        text-align: center;
      }
      .table-value {
        padding-left: 20px;
      }
    }
    .table-row + .table-row{
      border-top: 1px solid rgba(245, 246, 247, 1);
    }
  }
}
</style>
